<template>
	<view class="pageview">

		<view class="formView">
			<text class="title1">{{ $t('login.login.title2') }}</text>
			<text class="title1">{{ $t('login.login.title3') }}</text>
			<view style="margin-top: 40rpx;">
				<u-input v-model="fromdata.login_name" :placeholder="$t('login.login.input_username')" fontSize="28rpx"
					color="#333333" placeholderStyle="color: #595A66" prefixIcon="account-fill"
					prefixIconStyle="font-size: 45rpx;color: #85868C" border="none" style="margin-top: 40rpx;"
					:customStyle="inputClass"></u-input>

				<u-input v-model="fromdata.login_pwd" password fontSize="28rpx" color="#333333" prefixIcon="lock-fill"
					placeholderStyle="color: #595A66" prefixIconStyle="font-size: 45rpx;color: #85868C"
					:placeholder="$t('login.login.input_password')" border="none" style="margin-top: 40rpx;"
					:customStyle="inputClass"></u-input>
				<view style="color: #808082;font-size: 24rpx;margin: 30rpx 0 0;">
					{{$t("login.login.registerText")}}
					<text class="register" @click="goRegister" >{{$t("login.register.title")}}</text>
				</view>
			</view>
		</view>

		<view @click="confirmLogin" class="ControlsBtn">
			<text class="ControlsBtn__text">{{$t("login.login.title")}}</text>
		</view>
		
		<view style="position: fixed;bottom: 80rpx;">
			<u-checkbox-group v-model="agreement" placement="column" ref="privacyCheckbox" :class="{'shake':shake}">
				<u-checkbox name="name" size="14" :iconWrapStyle="{}">
					<view style="display: flex;align-items: center;font-size: 26rpx;">
						{{$t("login.agreement.readAgree")}}<navigator url="/pages/login/agreement?type=0" @tap.stop class="register">{{$t('login.agreement.title')}}</navigator>
						{{$t("login.agreement.and")}}
						<navigator url="/pages/login/agreement?type=1" @tap.stop class="register">{{$t('login.agreement.title1')}}</navigator>
					</view>
				</u-checkbox>
			</u-checkbox-group>
		</view>
		<view>
			<cl-model ref="clGoogle">
				<view class="yanzheng">
					<text>{{$t("login.login.googleCode")}}</text>
					<view class="googleView">
						<u-input
							:customStyle="{backgroundColor:'#ededed',height:'88rpx',padding:'0 20rpx',borderRadius: '20rpx'}" :adjustPosition="false" v-model="fromdata.google_code" border="none"
							focus></u-input>
					</view>
				</view>
			</cl-model>
		</view>
	</view>
</template>

<script>
	import store from '../../store';
	export default {
		data() {
			return {
				inputClass: {
					backgroundColor: '#ffffff',
					height: '90rpx',
					width: '570rpx',
					borderRadius: '20rpx',
					padding: '0 20rpx'
				},
				is_reg: 1,
				fromdata: {
					login_name: '',
					login_pwd: '',
					google_code: undefined,
				},
				agreement: ['name'],
				shake:false,//抖动动画
			};
		},
		onLoad() {
			var timeZoneOffset = new Date().getTimezoneOffset(); // 获取当前时区和UTC时间之间的时间差，单位为分钟
			var timeZone = "GMT" + (timeZoneOffset > 0 ? "-" : "+") +
				Math.floor(Math.abs(timeZoneOffset) / 60) +
				":" + (Math.abs(timeZoneOffset) % 60); // 根据时间差计算时区标志
			console.log(timeZone); // 输出时区标志，例如：GMT+8:00

			this.is_reg = uni.$config.is_reg
			console.log(this.$store.state.user);
		},
		methods: {
			async confirmLogin() {
				try {
					if(!this.agreement.length){
						this.triggerFeedback()
						return
					}
					console.log(this.$store.state.user);
					let updata = JSON.parse(JSON.stringify(this.fromdata))
					let res = await this.$api.user.login({
						...updata,
						...this.$store.state.user.deviceInfo
					})
					if (res) {
						let saveData = {
							...res.data.user_info,
							login_pwd: this.fromdata.login_pwd
						}
						this.saveOrUpdateAccountInfo(saveData)
						if (res.data.is_auth) {
							this.$refs.clGoogle.show({
								confirmText: this.$t("login.login.title"),
								cancelText: this.$t("common.cancelText"),
								confirm: async (e) => {
									try {
										this.confirmLogin()
										e.showModel = false
									} catch (e) {}
								},
								close: () => {}
							})
						} else {
							uni.showLoading({
								title: this.$t("api.loading.msg.loginNest")
							})
							await this.$store.dispatch('loginNest', {
								data:res.data
							})
							uni.hideLoading()
							this.$u.toast(this.$t('login.login.success'));
							this.$Router.pushTab({
								name: 'index'
							});
						}
					} else {
						this.fromdata.google_code = undefined
					}
				} catch (e) {
					this.fromdata.google_code = undefined
				}

			},
			goRegister() {
				if(uni.$config.is_need_avatar_nickname){
					this.$Router.replace({
						name: 'registerInfo'
					});
				}else{
					this.$Router.replace({
						name: 'register'
					});
				}
			},
			// 更新或保存账号信息
			saveOrUpdateAccountInfo(accountInfo) {
				accountInfo.login_type = 'login'
				let accounts = uni.getStorageSync('accounts') || [];
				const index = accounts.findIndex(account => account.login_name == accountInfo.login_name);
				if (index !== -1) {
					accounts[index] = accountInfo;
				} else {
					accounts.push(accountInfo);
				}
				uni.setStorageSync('accounts', accounts);
			},
			triggerFeedback() {
			  // 震动
			  plus.device.vibrate()
		
			  // 添加抖动效果
			  this.shake = true
		
			  // 移除抖动效果，保证后续点击仍能触发抖动
			  setTimeout(() => {
				this.shake = false
			  }, 500); // 抖动时间与动画时间一致
			},

		}
	};
</script>
<style lang="scss" scoped>
	.pageview {
		background-image: url('../../static/loginback.png');
		background-size: 100% 100%;
		display: flex;
		flex-direction: column;
		height: 100vh;
		align-items: center;
		box-sizing: border-box;

		.yanzheng {
			display: flex;
			flex-direction: column;
			width: 100%;

			.googleView {
				margin-top: 35rpx;
				width: 100%;
				text-align: left;
			}
		}

		.formView {
			margin-top: 40%;
			display: flex;
			max-width: 610rpx;
			flex-direction: column;
		}

		.title1 {
			overflow-wrap: break-word;
			color: #FF9700;
			font-size: 48rpx;
			text-align: left;
			line-height: 66rpx;
			max-width: 610rpx;
			overflow: hidden;
			// -webkit-background-clip: text;
			// -webkit-text-fill-color: transparent;
		}

		.ControlsBtn {
			background: #ffffff;
			border-radius: 46rpx;
			width: 610rpx;
			height: 90rpx;
			line-height: 90rpx;
			text-align: center;
			margin-top: 30rpx;

			&__text {
				// background-image: linear-gradient(180deg,
				// 		rgba(255, 255, 255, 1) 0,
				// 		rgba(229, 189, 132, 1) 100%);
				overflow-wrap: break-word;
				color: #FF9700;
				font-size: 42rpx;
				font-weight: 500;
				text-align: left;
				white-space: nowrap;
				// -webkit-background-clip: text;
				// -webkit-text-fill-color: transparent;
			}
		}

		.register {
			// background-image: linear-gradient(180deg,
			// 		rgba(255, 255, 255, 1) 0,
			// 		rgba(229, 189, 132, 1) 100%);
			overflow-wrap: break-word;
			color: #FF9700;
			text-align: left;
			white-space: nowrap;
			// -webkit-background-clip: text;
			// -webkit-text-fill-color: transparent;
		}
		
		.shake {
		  animation: shake 0.5s;
		}
		
		@keyframes shake {
		  0% { transform: translateX(0); }
		  25% { transform: translateX(-10px); }
		  50% { transform: translateX(10px); }
		  75% { transform: translateX(-10px); }
		  100% { transform: translateX(0); }
		}
	}
</style>